<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="https://cdn.bootcdn.net/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/reset.css">
	</head>
	<body>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#test>div:nth-child(1){
				background: palegoldenrod;
			}
			#test>div:nth-child(2){
				background: palegreen;
			}
			#test>div:nth-child(3){
				background: paleturquoise;
			}
			#test>div:nth-child(4){
				background: palevioletred;
			}
			.header{
				width: 100%;
				position: relative;
			}
			#menu{
				position: absolute;
				left: 50px;
				top: 50px;
				z-index: 999;
			}
			#menu>li{
				list-style: none;
				margin: 20px 0;
			}
			#menu>li>a{
				color: #9370DB;
			}
			#menu li:nth-child(1).active a{
				color: red;
			}
			#menu li:nth-child(2).active a{
				color: yellow;
			}
			#menu li:nth-child(3).active a{
				color: blue;
			}
			#menu li:nth-child(4).active a{
				color: green;
			}
		</style>
		
		<div id="test">
			<div class="section active">
				<div class="header">
					<div class="logo">
						<img src="images/logo.webp" alt="">
					</div>
					<ul id="menu">
						<li data-menuanchor="page1" class="active"><a href="#page1">新闻公告</a></li>
						<li data-menuanchor="page2"><a href="#page2">神都同人馆</a></li>
						<li data-menuanchor="page3"><a href="#page3">妖灵介绍</a></li>
						<li data-menuanchor="page4"><a href="#page4">降妖师面试</a></li>
						<li data-menuanchor="page5"><a href="#page5">游戏特色</a></li>
						<li>
								<a href="">同人漫画</a>
							</li>
						<li>
							<a href="">游戏论坛</a>
						</li>
						<li>
							<a href="">关注我们</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="section"></div>
			<div class="section"></div>
			<div class="section"></div>
			<div class="section"></div>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/fullPage.js/2.9.7/jquery.fullpage.min.js"></script>
		<script>
			
			// 初始化
			$('#test').fullpage({
				// sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
				anchors: ['page1', 'page2', 'page3', 'page4','page5'],
				menu: '#menu',
				onLeave: function(index, nextIndex, direction){
					console.log(index, nextIndex, direction);
				}
			});
			
		</script>
	</body>
</html>
